<template>
	<view class="record-container">
		<!-- 顶部装饰 -->
		<view class="header-decoration">
			<view class="wave-bg"></view>
			<view class="floating-elements">
				<view class="element element-1"></view>
				<view class="element element-2"></view>
			</view>
		</view>

		<!-- 页面标题 -->
		<view class="page-header">
			<view class="header-content">
				<text class="page-title">记录管理</text>
				<text class="page-subtitle">查看和管理所有单据记录</text>
			</view>
		</view>

		<!-- 顶部Tab -->
		<view class="tabs">
			<view :class="['tab', tabType === 'fill' ? 'active' : '']" @click="switchTab('fill')">
				<text class="tab-text">塘头单</text>
			</view>
			<view :class="['tab', tabType === 'process' ? 'active' : '']" @click="switchTab('process')">
				<text class="tab-text">工厂单</text>
			</view>
			<view :class="['tab', tabType === 'consume' ? 'active' : '']" @click="switchTab('consume')">
				<text class="tab-text">报销单</text>
			</view>
		</view>

		<!-- 搜索和过滤 -->
		<view class="search-filter">
			<view class="search-box">
				<view class="search-icon">🔍</view>
				<input class="search-input" v-model="searchKeyword" placeholder="搜索单号、姓名、车牌号" @input="onSearch" />
			</view>
			<view class="date-search-box">
				<view class="date-icon">📅</view>
				<picker mode="date" :value="searchDate" @change="onDateChange" class="date-picker">
					<view class="date-input">
						<text class="date-text"
							:class="{ 'placeholder': !searchDate }">{{ searchDate || '选择日期查询' }}</text>
						<text class="date-clear" v-if="searchDate" @click.stop="clearDate">×</text>
					</view>
				</picker>
			</view>
			<view class="filter-tabs">
				<view :class="['filter-tab', statusFilter === 'all' ? 'active' : '']" @click="filterStatus('all')">
					<text class="filter-text">全部</text>
				</view>
				<view :class="['filter-tab', statusFilter === 'writing' ? 'active' : '']"
					@click="filterStatus('writing')">
					<text class="filter-text">填写中</text>
				</view>
				<view :class="['filter-tab', statusFilter === 'submitted' ? 'active' : '']"
					@click="filterStatus('submitted')">
					<text class="filter-text">已提交</text>
				</view>
				<view :class="['filter-tab', statusFilter === 'finished' ? 'active' : '']"
					@click="filterStatus('finished')">
					<text class="filter-text">已结束</text>
				</view>
			</view>
		</view>
		<!-- 卡片列表 -->
		<scroll-view class="order-list" scroll-y @scrolltolower="loadMoreData">
			<!-- 加载状态 -->
			<view class="loading-container" v-if="loading && currentList.length === 0">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 记录列表 -->
			<view v-for="(item, idx) in currentList" :key="item.id || idx" :class="['order-card', item.status]">
				<view class="card-header">
					<view class="order-number">
						<text class="number-label">单号</text>
						<text class="number-value">{{ item.orderNo }}</text>
					</view>
					<view class="status-badge" :class="item.status">
						<view class="status-dot"></view>
						<text class="status-text">
							{{ item.status === 'writing' ? '填写中' : (item.status === 'submitted' ? '已提交' : '已结束') }}
						</text>
					</view>
				</view>

				<view class="card-content">
					<view class="info-row">
						<view class="info-item">
							<text
								class="info-label">{{ tabType === 'fill' ? '塘主' : (tabType === 'process' ? '供应商' : '消费人') }}</text>
							<text
								class="info-value">{{ tabType === 'fill' ? item.owner : (tabType === 'process' ? item.supplier : item.consumer) }}</text>
						</view>
						<!-- <view class="info-item">
							<text class="info-label">车号</text>
							<text class="info-value">{{ item.carNo }}</text>
						</view> -->
						<view class="info-item">
							<text class="info-label">时间</text>
							<text class="info-value">{{ item.time }}</text>
						</view>
					</view>
					<view class="info-row">
						
					</view>
				</view>

				<!-- 操作按钮区 -->
				<view class="card-actions">
					<button class="card-btn" v-for="btn in getBtns(item)" :key="btn.text" :class="{active: btn.active}"
						@click="btnClick(item,btn)">{{ btn.text }}</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-container" v-if="!loading && currentList.length === 0">
				<text class="empty-text">暂无记录</text>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="showLoadMore">
				<text class="load-more-text">加载更多...</text>
			</view>

			<!-- 没有更多数据 -->
			<view class="no-more" v-if="!hasMore && currentList.length > 0">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabType: 'fill',
				fillList: [],
				processList: [],
				consumeList: [],
				loading: false,
				refreshing: false,
				hasMore: true,
				currentPage: 1,
				pageSize: 10,
				searchKeyword: '',
				searchDate: '',
				statusFilter: 'all' // all, writing, submitted, finished
			}
		},
		computed: {
			currentList() {
				let list = [];
				if (this.tabType === 'fill') {
					list = this.fillList;
				} else if (this.tabType === 'process') {
					list = this.processList;
				} else if (this.tabType === 'consume') {
					list = this.consumeList;
				}

				// 应用搜索过滤
				if (this.searchKeyword) {
					list = list.filter(item => {
						const keyword = this.searchKeyword.toLowerCase();
						return item.orderNo.toLowerCase().includes(keyword) ||
							(item.owner && item.owner.toLowerCase().includes(keyword)) ||
							(item.supplier && item.supplier.toLowerCase().includes(keyword)) ||
							(item.consumer && item.consumer.toLowerCase().includes(keyword)) ||
							(item.carNo && item.carNo.toLowerCase().includes(keyword));
					});
				}

				// 应用日期过滤
				if (this.searchDate) {
					list = list.filter(item => {
						if (!item.time) return false;
						// 提取日期部分进行比较
						const itemDate = item.time.split(' ')[0];
						return itemDate === this.searchDate;
					});
				}

				// 应用状态过滤
				if (this.statusFilter !== 'all') {
					list = list.filter(item => item.status === this.statusFilter);
				}

				return list;
			},

			// 计算是否显示加载更多
			showLoadMore() {
				return this.currentList.length > 0 && this.hasMore && !this.loading;
			}
		},
		onLoad(options) {
			console.log("页面加载参数--->" + JSON.stringify(options))
			// 支持通过参数切换Tab
			if (options && options.tabType) {
				this.tabType = options.tabType
			} else if (options && options.item === '1') {
				this.tabType = 'process'
			}
			this.loadData()
		},

		onShow() {
			// 页面显示时刷新数据
			this.refreshData()
		},

		onPullDownRefresh() {
			this.refreshData()
		},

		onReachBottom() {
			this.loadMoreData()
		},
		methods: {
			/**
			 * 加载数据
			 */
			async loadData() {
				if (this.loading) return

				try {
					this.loading = true

					// 模拟API调用
					const mockData = this.generateMockData()

					// 模拟网络延迟
					await new Promise(resolve => setTimeout(resolve, 500))

					if (this.currentPage === 1) {
						if (this.tabType === 'fill') {
							this.fillList = mockData.fillList
						} else if (this.tabType === 'process') {
							this.processList = mockData.processList
						} else if (this.tabType === 'consume') {
							this.consumeList = mockData.consumeList
						}
					} else {
						if (this.tabType === 'fill') {
							this.fillList = [...this.fillList, ...mockData.fillList]
						} else if (this.tabType === 'process') {
							this.processList = [...this.processList, ...mockData.processList]
						} else if (this.tabType === 'consume') {
							this.consumeList = [...this.consumeList, ...mockData.consumeList]
						}
					}

					// 模拟没有更多数据
					if (this.currentPage >= 2) {
						this.hasMore = false
					}

				} catch (error) {
					console.error('加载数据失败:', error)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			/**
			 * 生成模拟数据
			 */
			generateMockData() {
				const fillList = [{
						id: 1,
						orderNo: 'BT' + Date.now(),
						owner: '刘加一',
						carNo: '粤A12345',
						time: '2024-01-15 16:20:12',
						status: 'writing'
					},
					{
						id: 2,
						orderNo: 'BT' + (Date.now() + 1),
						owner: '六六',
						carNo: '粤A12346',
						time: '2024-01-14 16:20:12',
						status: 'submitted'
					},
					{
						id: 3,
						orderNo: 'BT' + (Date.now() + 2),
						owner: '六刘六',
						carNo: '粤A1eee5',
						time: '2024-01-13 16:20:12',
						status: 'finished'
					}
				]

				const processList = [{
						id: 1,
						orderNo: 'GC' + Date.now(),
						supplier: '水厂渔业有限公司',
						carNo: '粤A12345',
						time: '2024-01-15 16:20:12',
						status: 'writing'
					},
					{
						id: 2,
						orderNo: 'GC' + (Date.now() + 1),
						supplier: '魔匙供应商',
						carNo: '粤K23W23',
						time: '2024-01-14 16:20:12',
						status: 'submitted'
					},
					{
						id: 3,
						orderNo: 'GC' + (Date.now() + 2),
						supplier: '是得有限公司',
						carNo: '粤A1eee5',
						time: '2024-01-13 16:20:12',
						status: 'finished'
					}
				]

				const consumeList = [{
						id: 1,
						orderNo: 'XF' + Date.now(),
						consumer: '张三',
						time: '2024-01-15 16:20:12',
						status: 'writing'
					},
					{
						id: 2,
						orderNo: 'XF' + (Date.now() + 1),
						consumer: '李四',
						time: '2024-01-14 16:20:12',
						status: 'submitted'
					},
					{
						id: 3,
						orderNo: 'XF' + (Date.now() + 2),
						consumer: '王五',
						time: '2024-01-13 16:20:12',
						status: 'finished'
					}
				]

				return {
					fillList,
					processList,
					consumeList
				}
			},

			/**
			 * 刷新数据
			 */
			async refreshData() {
				this.refreshing = true
				this.currentPage = 1
				this.hasMore = true
				await this.loadData()
				this.refreshing = false
				uni.stopPullDownRefresh()
			},

			/**
			 * 加载更多数据
			 */
			async loadMoreData() {
				if (!this.hasMore || this.loading) return

				this.currentPage++
				await this.loadData()
			},

			/**
			 * 切换Tab
			 */
			switchTab(type) {
				if (this.tabType === type) return

				this.tabType = type
				this.currentPage = 1
				this.hasMore = true
				this.loadData()
			},

			/**
			 * 搜索
			 */
			onSearch(keyword) {
				this.searchKeyword = keyword
			},

			/**
			 * 日期选择变化
			 */
			onDateChange(e) {
				this.searchDate = e.detail.value
			},

			/**
			 * 清除日期搜索
			 */
			clearDate() {
				this.searchDate = ''
			},

			/**
			 * 过滤状态
			 */
			filterStatus(status) {
				this.statusFilter = status
			},

			btnClick(item, btn) {
				console.log("按钮点击--->" + JSON.stringify(item))
				console.log("按钮点击--->" + JSON.stringify(btn))
				if (this.tabType === 'fill') {
					//塘头单
					switch (btn.text) {
						case "基本信息":
							uni.navigateTo({
								url: '/pages/home/botou/index'
							});
							break;
						case "单据信息":
							uni.navigateTo({
								url: '/pages/home/botou/summary-detail'
							});
							break;
					}
				} else if (this.tabType === 'process') {
					//工厂单
					switch (btn.text) {
						case "基本信息":
							uni.navigateTo({
								url: '/pages/home/gongchang/index'
							});
							break;
						case "单据信息":
							uni.navigateTo({
								url: '/pages/home/gongchang/aggregate-detail'
							});
							break;
					}
				} else if (this.tabType === 'consume') {
					//消费单
					switch (btn.text) {
						case "报销信息":
							uni.navigateTo({
								url: '/pages/home/skin-damage'
							});
							break;
						case "汇总信息":
							uni.navigateTo({
								url: '/pages/home/skin-damage'
							});
							break;
					}
				}
			},

			getBtns(item) {
				// 消费单不显示汇总信息按钮
				if (this.tabType === 'consume') {
					return [{
						text: '报销信息',
						active: true
					}]
				}
				
				// 塘头单和工厂单显示基本信息和汇总信息按钮
				const writingButtons = [{
					text: '基本信息',
					active: true
				}, {
					text: '单据信息',
					active: true
				}]
				const finishedButtons = [{
					text: '基本信息',
					active: false
				}, {
					text: '单据信息',
					active: true
				}]
				return item.status === 'writing' ? writingButtons : finishedButtons
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/uni.scss';

	.record-container {
		background: $bg-secondary;
		min-height: 100vh;
		position: relative;
	}

	/* 顶部装饰 */
	.header-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 240rpx;
		z-index: 1;
		overflow: hidden;
	}

	.wave-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, $primary 0%, $secondary 50%, $accent 100%);
		border-radius: 0 0 40% 40%;
		transform: scale(1.2);
		animation: wave-flow 8s ease-in-out infinite;
	}

	@keyframes wave-flow {

		0%,
		100% {
			transform: scale(1.2) rotate(0deg);
		}

		50% {
			transform: scale(1.3) rotate(1deg);
		}
	}

	.floating-elements {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.element {
		position: absolute;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		animation: element-float 8s ease-in-out infinite;
		backdrop-filter: blur(10rpx);
	}

	.element-1 {
		width: 50rpx;
		height: 50rpx;
		top: 25%;
		left: 15%;
		animation-delay: 0s;
		box-shadow: 0 4rpx 20rpx rgba(255, 255, 255, 0.2);
	}

	.element-2 {
		width: 70rpx;
		height: 70rpx;
		top: 55%;
		right: 20%;
		animation-delay: 4s;
		box-shadow: 0 6rpx 25rpx rgba(255, 255, 255, 0.15);
	}

	@keyframes element-float {

		0%,
		100% {
			transform: translateY(0px) scale(1) rotate(0deg);
			opacity: 0.7;
		}

		50% {
			transform: translateY(-30rpx) scale(1.1) rotate(180deg);
			opacity: 1;
		}
	}

	/* 页面标题 */
	.page-header {
		position: relative;
		z-index: 2;
		padding: 50rpx 20rpx 30rpx 20rpx;
		background: transparent;
		max-width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.header-content {
		text-align: center;
		position: relative;
	}

	.page-title {
		display: block;
		font-size: 42rpx;
		font-weight: 800;
		color: $text-white;
		margin-bottom: 12rpx;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
		letter-spacing: 2rpx;
		position: relative;
	}

	.page-title::after {
		content: '';
		position: absolute;
		bottom: -8rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
		border-radius: 2rpx;
	}

	.page-subtitle {
		display: block;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
		letter-spacing: 1rpx;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
	}

	/* 标签页 */
	.tabs {
		display: flex;
		justify-content: center;
		margin: 30rpx 20rpx 20rpx 20rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: $radius-xl;
		padding: 12rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 2;
		backdrop-filter: blur(20rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.tab {
		flex: 1;
		padding: 20rpx 24rpx;
		text-align: center;
		border-radius: $radius-lg;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
	}

	.tab::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		border-radius: $radius-lg;
	}

	.tab-text {
		font-size: $font-lg;
		font-weight: 700;
		color: $text-secondary;
		transition: all 0.3s ease;
		position: relative;
		z-index: 1;
		letter-spacing: 1rpx;
	}

	.tab.active {
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.3);
		transform: translateY(-2rpx);
	}

	.tab.active::before {
		opacity: 0;
	}

	.tab.active .tab-text {
		color: $text-white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	/* 搜索和过滤 */
	.search-filter {
		background: rgba(255, 255, 255, 0.95);
		padding: 24rpx;
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: $radius-xl;
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 2;
		backdrop-filter: blur(20rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.search-box {
		position: relative;
		margin-bottom: 24rpx;
	}

	.search-icon {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		color: $text-tertiary;
		z-index: 1;
		transition: all 0.3s ease;
	}

	.search-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid rgba(30, 136, 229, 0.1);
		border-radius: $radius-xl;
		padding: 0 70rpx 0 70rpx;
		font-size: $font-md;
		background: rgba(248, 250, 252, 0.8);
		color: $text-primary;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-sizing: border-box;
		backdrop-filter: blur(10rpx);
	}

	.search-input:focus {
		border-color: $primary;
		box-shadow: 0 0 0 8rpx rgba(30, 136, 229, 0.15);
		outline: none;
		background: rgba(255, 255, 255, 0.95);
		transform: translateY(-2rpx);
	}

	.search-input:focus+.search-icon {
		color: $primary;
		transform: translateY(-50%) scale(1.1);
	}

	.search-input::placeholder {
		color: $text-tertiary;
		font-weight: 400;
	}

	.date-search-box {
		position: relative;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
	}

	.date-icon {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		color: $text-tertiary;
		z-index: 1;
		transition: all 0.3s ease;
	}

	.date-picker {
		width: 100%;
	}

	.date-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid rgba(51, 136, 255, 0.1);
		border-radius: $radius-xl;
		padding: 0 70rpx 0 70rpx;
		font-size: $font-md;
		background: rgba(248, 250, 252, 0.8);
		color: $text-primary;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		backdrop-filter: blur(10rpx);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.date-input:active {
		border-color: $primary;
		box-shadow: 0 0 0 8rpx rgba(51, 136, 255, 0.15);
		background: rgba(255, 255, 255, 0.95);
		transform: translateY(-2rpx);
	}

	.date-text {
		flex: 1;
		color: $text-primary;
	}

	.date-text.placeholder {
		color: $text-tertiary;
	}

	.date-clear {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: $text-tertiary;
		background: rgba(0, 0, 0, 0.05);
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.date-clear:active {
		background: rgba(0, 0, 0, 0.1);
		transform: scale(0.9);
	}

	.filter-tabs {
		display: flex;
		gap: 16rpx;
	}

	.filter-tab {
		flex: 1;
		height: 68rpx;
		text-align: center;
		background: rgba(248, 250, 252, 0.8);
		border-radius: $radius-xl;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		border: 2rpx solid transparent;
	}

	.filter-tab::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		border-radius: $radius-xl;
	}

	.filter-text {
		font-size: $font-sm;
		font-weight: 600;
		color: $text-secondary;
		transition: all 0.3s ease;
		position: relative;
		z-index: 1;
		letter-spacing: 0.5rpx;
	}

	.filter-tab.active {
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.25);
		border-color: $primary;
		transform: translateY(-2rpx);
	}

	.filter-tab.active::before {
		opacity: 0;
	}

	.filter-tab.active .filter-text {
		color: $text-white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	/* 订单列表 */
	.order-list {
		padding: 0 20rpx;
		position: relative;
		z-index: 2;
		max-width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.order-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: $radius-xl;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 24rpx;
		padding: 24rpx;
		position: relative;
		border: 1rpx solid rgba(30, 136, 229, 0.08);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
		backdrop-filter: blur(20rpx);
		width: 100%;
		box-sizing: border-box;
	}

	.order-card:nth-child(odd) {
		transform: translateX(-2rpx);
	}

	.order-card:nth-child(even) {
		transform: translateX(2rpx);
	}

	.order-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(30, 136, 229, 0.03) 0%, rgba(38, 198, 218, 0.03) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
		border-radius: $radius-xl;
	}

	.order-card::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 6rpx;
		height: 100%;
		background: linear-gradient(180deg, $primary 0%, $secondary 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		border-radius: 0 6rpx 6rpx 0;
	}

	.order-card:hover {
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
		transform: translateY(-6rpx) scale(1.01) translateX(0);
		border-color: rgba(30, 136, 229, 0.2);
	}

	.order-card:hover::before {
		opacity: 1;
	}

	.order-card:hover::after {
		opacity: 1;
	}

	.order-card.writing {
		border-left: 6rpx solid $warning;
		box-shadow: 0 8rpx 32rpx rgba(245, 158, 11, 0.1);
	}

	.order-card.writing::after {
		background: linear-gradient(180deg, $warning 0%, #f59e0b 100%);
		opacity: 1;
	}

	.order-card.submitted {
		border-left: 6rpx solid $info;
		box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.1);
	}

	.order-card.submitted::after {
		background: linear-gradient(180deg, $info 0%, #3b82f6 100%);
		opacity: 1;
	}

	.order-card.finished {
		border-left: 6rpx solid $success;
		box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
	}

	.order-card.finished::after {
		background: linear-gradient(180deg, $success 0%, #10b981 100%);
		opacity: 1;
	}

	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
		position: relative;
		z-index: 1;
	}

	.order-number {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.number-label {
		font-size: $font-sm;
		color: $text-tertiary;
		margin-bottom: 8rpx;
		font-weight: 500;
		letter-spacing: 0.5rpx;
	}

	.number-value {
		font-size: 32rpx;
		font-weight: 800;
		color: $text-primary;
		letter-spacing: 1rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
		line-height: 1.2;
	}

	.status-badge {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 8rpx 16rpx;
		border-radius: $radius-lg;
		background: rgba(248, 250, 252, 0.9);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.status-badge.writing {
		background: rgba(245, 158, 11, 0.12);
		border-color: rgba(245, 158, 11, 0.25);
		box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.15);
	}

	.status-badge.submitted {
		background: rgba(59, 130, 246, 0.12);
		border-color: rgba(59, 130, 246, 0.25);
		box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.15);
	}

	.status-badge.finished {
		background: rgba(16, 185, 129, 0.12);
		border-color: rgba(16, 185, 129, 0.25);
		box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.15);
	}

	.status-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.15);
		animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.7;
		}
	}

	.status-badge.writing .status-dot {
		background: $warning;
		box-shadow: 0 0 0 2rpx rgba(245, 158, 11, 0.2);
	}

	.status-badge.submitted .status-dot {
		background: $info;
		box-shadow: 0 0 0 2rpx rgba(59, 130, 246, 0.2);
	}

	.status-badge.finished .status-dot {
		background: $success;
		box-shadow: 0 0 0 2rpx rgba(16, 185, 129, 0.2);
	}

	.status-text {
		font-size: $font-sm;
		font-weight: 600;
		color: $text-primary;
		letter-spacing: 0.3rpx;
	}

	/* 卡片内容 */
	.card-content {
		margin-bottom: 28rpx;
		position: relative;
		z-index: 1;
	}

	.info-row {
		display: flex;
		gap: 24rpx;
		margin-bottom: 16rpx;
	}

	.info-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: rgba(248, 250, 252, 0.6);
		padding: 18rpx;
		border-radius: $radius-md;
		border: 1rpx solid rgba(30, 136, 229, 0.08);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.info-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(30, 136, 229, 0.02) 0%, rgba(38, 198, 218, 0.02) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.info-item:hover {
		background: rgba(248, 250, 252, 0.9);
		border-color: rgba(30, 136, 229, 0.15);
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.info-item:hover::before {
		opacity: 1;
	}

	.info-label {
		font-size: $font-sm;
		color: $text-tertiary;
		margin-bottom: 8rpx;
		font-weight: 500;
		letter-spacing: 0.5rpx;
		position: relative;
		z-index: 1;
	}

	.info-value {
		font-size: $font-md;
		font-weight: 700;
		color: $text-primary;
		letter-spacing: 0.5rpx;
		position: relative;
		z-index: 1;
	}

	/* 卡片操作按钮 */
	.card-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-top: 20rpx;
		position: relative;
		z-index: 1;
		width: 100%;
		box-sizing: border-box;
	}

	.card-btn {
		flex: 1 1 30%;
		min-width: 120rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.9);
		color: $text-secondary;
		border: 1rpx solid rgba(30, 136, 229, 0.15);
		border-radius: $radius-md;
		font-size: 26rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		backdrop-filter: blur(10rpx);
		position: relative;
		overflow: hidden;
		letter-spacing: 0.3rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
	}

	.card-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		border-radius: $radius-lg;
	}

	.card-btn.active {
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		color: $text-white;
		border-color: $primary;
		box-shadow: 0 4rpx 16rpx rgba(51, 136, 255, 0.3);
		transform: translateY(-1rpx);
		font-weight: 600;
	}

	.card-btn.active::before {
		opacity: 0;
	}

	.card-btn:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
		border-color: rgba(51, 136, 255, 0.25);
	}

	.card-btn:hover::before {
		opacity: 0.1;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
		background: rgba(255, 255, 255, 0.8);
		border-radius: $radius-xl;
		margin: 20rpx 0;
		backdrop-filter: blur(20rpx);
	}

	.loading-spinner {
		width: 48rpx;
		height: 48rpx;
		border: 4rpx solid rgba(30, 136, 229, 0.1);
		border-top: 4rpx solid $primary;
		border-radius: 50%;
		animation: spin 1.2s linear infinite;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(30, 136, 229, 0.2);
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: $font-md;
		color: $text-secondary;
		font-weight: 500;
		letter-spacing: 1rpx;
	}

	.bottom-tips {
		text-align: center;
		color: $text-tertiary;
		margin-top: 30rpx;
		font-size: $font-sm;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mascot {
		width: 80rpx;
		height: 80rpx;
		margin-top: 10rpx;
	}

	.empty-container {
		text-align: center;
		padding: 80rpx 0;
		background: rgba(255, 255, 255, 0.8);
		border-radius: $radius-xl;
		margin: 20rpx 0;
		backdrop-filter: blur(20rpx);
	}

	.empty-text {
		color: $text-tertiary;
		font-size: $font-md;
		font-weight: 500;
		letter-spacing: 1rpx;
	}

	.load-more,
	.no-more {
		text-align: center;
		padding: 40rpx 0;
		background: rgba(255, 255, 255, 0.6);
		border-radius: $radius-lg;
		margin: 20rpx 0;
		backdrop-filter: blur(10rpx);
	}

	.load-more-text,
	.no-more-text {
		color: $text-secondary;
		font-size: $font-sm;
		font-weight: 500;
		letter-spacing: 0.5rpx;
	}

	/* 响应式设计 - 大屏幕 */
	@media screen and (min-width: 1200rpx) {

		.page-header,
		.tabs,
		.search-filter,
		.order-list {
			max-width: 900rpx;
			margin-left: auto;
			margin-right: auto;
		}

		.order-list {
			padding: 0 30rpx;
		}
	}

	/* 响应式设计 - 中等屏幕 */
	@media screen and (max-width: 900rpx) and (min-width: 600rpx) {
		.page-header {
			padding: 40rpx 20rpx 20rpx 20rpx;
		}

		.tabs {
			margin: 20rpx 20rpx 15rpx 20rpx;
		}

		.search-filter {
			margin: 0 20rpx 15rpx 20rpx;
			padding: 20rpx;
		}

		.order-list {
			padding: 0 20rpx;
		}

		.order-card {
			padding: 20rpx;
		}

		.card-btn {
			min-width: 100rpx;
			height: 60rpx;
			font-size: 24rpx;
		}
	}

	/* 响应式设计 - 小屏幕 */
	@media screen and (max-width: 600rpx) {
		.page-header {
			padding: 30rpx 15rpx 15rpx 15rpx;
		}

		.tabs {
			margin: 15rpx 15rpx 10rpx 15rpx;
			padding: 8rpx;
		}

		.search-filter {
			margin: 0 15rpx 10rpx 15rpx;
			padding: 15rpx;
		}

		.order-list {
			padding: 0 15rpx;
		}

		.order-card {
			padding: 20rpx;
			margin-bottom: 20rpx;
		}

		.card-header {
			margin-bottom: 16rpx;
		}

		.card-content {
			margin-bottom: 16rpx;
		}

		.card-actions {
			margin-top: 16rpx;
			gap: 8rpx;
		}

		.card-btn {
			height: 56rpx;
			min-width: 90rpx;
			font-size: 22rpx;
		}

		.info-item {
			padding: 12rpx;
		}
	}

	/* 响应式设计 - 超小屏幕 */
	@media screen and (max-width: 480rpx) {
		.page-header {
			padding: 25rpx 12rpx 12rpx 12rpx;
		}

		.tabs {
			margin: 12rpx 12rpx 8rpx 12rpx;
			padding: 6rpx;
		}

		.search-filter {
			margin: 0 12rpx 8rpx 12rpx;
			padding: 12rpx;
		}

		.order-list {
			padding: 0 12rpx;
		}

		.order-card {
			padding: 16rpx;
			margin-bottom: 16rpx;
		}

		.card-btn {
			height: 52rpx;
			min-width: 80rpx;
			font-size: 20rpx;
		}

		.info-item {
			padding: 10rpx;
		}

		.info-row {
			gap: 12rpx;
		}
	}
</style>